import React, { useCallback, useEffect } from 'react'

import { createForm, formShape } from 'rc-form';
import { InputItem } from 'antd-mobile';

const Form = (props) => {
  const { getFieldProps, getFieldError, validateFields } = props.form

  useEffect(() => {
    console.log(props, 'props');
  }, [])


  const submit = useCallback(() => {
    validateFields((error, value) => {
      console.log(error, value);
    });
  }, [])


  let errors
  return (
    <>
      <div>
        <InputItem {...getFieldProps('name')} />
        <InputItem {...getFieldProps('sort', {
          onChange() { console.log('111'); },
          rules: [{ required: true }],
        })} type="number" />
        {(errors = getFieldError('required')) ? errors.join(',') : null}
        <button onClick={() => submit()}>submit</button>
      </div>
    </>
  );

}

export default createForm()(Form);